<template>
	<view>
		<view class="search-wrap">
			<view class="search_input">
				<input
					type="text"
					v-model="inputValue"
					@input="handleInput"
					placeholder-style="padding-left:15rpx;"
					placeholder-class="search_icon iconfont icon-sousuo-copy"
					placeholder="搜索"
					class="search_btn"
				/>
				<view class="canel" @tap="cancelSearch">取消</view>
			</view>
		
		</view>
		<template v-if="list.length > 0">
			<!-- 列表区域 -->
			<block v-for="(item, index) in list" :key="index">
				<!-- 图文列表 -->
				<DynamicList :itemLis="item" :index="index"></DynamicList>
			</block>
		</template>
		<template v-else>
			<NothingPic v-show="isSearch"></NothingPic>
		</template>
	</view>
</template>

<script>
import DynamicList from '../../components/dynamic-list/dynamic-list';
import NothingPic from '../../components/nothingPic/nothingPic';
export default {
	components: {
		DynamicList,
		NothingPic
	},
	data() {
		return {
			// 监听文本框的值
			inputValue: '',
			list: [],
			// 控制没有内容时的图片显示隐藏
			isSearch:false
		}
	},
	methods: {
		// 监听文本框
		handleInput(e) {
			// 获取文本框输入的值
			let { value } = e.detail;
			this.inputValue = value;
			if(this.inputValue){
				this.getData()
			}
		},
		// 监听取消
		cancelSearch(){
			uni.navigateBack({
				delta:1
			})
		},
		// 搜索事件
		getData(){
			uni.showLoading({
				title:'搜索中',
				mask:true
			})
			setTimeout(()=>{
				let arr=[
				{
					userpic: '../../static/demo/userpic/12.jpg',
					username: '昵称',
					isguanzhu: false,
					title: '我是标题',
					type: 'img', // img:图文,video:视频
					titlepic: '../../static/demo/datapic/11.jpg',
					infonum: {
						index: 0, //0:没有操作，1:顶,2:踩；
						dingnum: 11,
						cainum: 11
					},
					commentnum: 10,
					sharenum: 10
				},
				{
					userpic: '../../static/demo/userpic/12.jpg',
					username: '昵称',
					isguanzhu: true,
					title: '我是标题',
					type: 'video', // img:图文,video:视频
					titlepic: '../../static/demo/datapic/11.jpg',
					playnum: '20w',
					long: '2:47',
					infonum: {
						index: 1, //0:没有操作，1:顶,2:踩；
						dingnum: 11,
						cainum: 11
					},
					commentnum: 10,
					sharenum: 10
				},
				{
					userpic: '../../static/demo/userpic/12.jpg',
					username: '昵称1',
					isguanzhu: false,
					title: '我是标题',
					type: 'video', // img:图文,video:视频
					titlepic: '../../static/demo/datapic/11.jpg',
					playnum: '20w',
					long: '2:47',
					infonum: {
						index: 1, //0:没有操作，1:顶,2:踩；
						dingnum: 11,
						cainum: 11
					},
					commentnum: 10,
					sharenum: 10
				}
			]
			this.list=arr
			uni.hideLoading()
			this.isSearch=true
			},2000)
		}
	}
};
</script>

<style lang="less" scoped>
.search-wrap {
	margin-top: 20rpx;
	.search_input {
		height: 70rpx;
		display: flex;

		.search_btn {
			flex: 1;
			background-color: #f7f7f7;
			height: 100%;
			margin-left: 15rpx;
			border-radius: 15rpx;
			padding-left: 20rpx;
		}
		.canel {
			font-weight: 550;
			display: flex;
			align-items: center;
			padding: 0 15rpx;
		}
	}
}
</style>
